<template>


  <div id="app">


    <div>
      <div id="xlk">
        <el-form id="ss" ref="form"  >
          <el-form-item label="">
            <el-select  placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div id="sm">
        <van-icon size="30px" color="blue" name="scan" />
      </div>
    </div>

    <div>
      <van-image
          width="100%"
          height="150px"
          src="https://bimgurl.oss-cn-beijing.aliyuncs.com/user/2024/11/15/526f5826bc56432aae3d8b936faf9f2b.png"
      />
    </div>
    <div id="one">
      <div id="ywgl">
        <span id="zi">运维管理</span>
      </div>
      <div>
        <div class="icon">
          <van-icon  id="tb"  @click="work_order" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">运维工单</span>
        </div>
        <div class="icon">
          <van-icon id="tb" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">我的审批</span>
        </div>
        <div class="icon">
          <van-icon id="tb" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">巡检计划</span>
        </div>
        <div class="icon">
          <van-icon id="tb" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">巡检记录</span>
        </div>
        <div class="icon">
          <van-icon id="tb" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">维保计划</span>
        </div>
        <div class="icon">
          <van-icon id="tb" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">维保记录</span>
        </div>
        <div class="icon">
          <van-icon id="tb" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">运维报修</span>
        </div>

      </div>
    </div>

    <div id="two">
      <div id="bjgl">
        <span id="zi">保洁管理</span>
      </div>
      <div>
        <div class="icon">
          <van-icon @click="bjgd"  id="tbs" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">保洁工单</span>
        </div>
        <div class="icon">
          <van-icon id="tbs" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">保洁计划</span>
        </div>
        <div class="icon">
          <van-icon id="tbs" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">执行记录</span>
        </div>
        <div class="icon">
          <van-icon id="tbs" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">保洁报单</span>
        </div>
      </div>
    </div>

    <div id="three">
      <div id="zybs">
        <span id="zi">中央运送</span>
      </div>
      <div>
        <div class="icon">
          <van-icon  id="tbs" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">运送工单</span>
        </div>
        <div class="icon">
          <van-icon id="tbs" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">运送计划</span>
        </div>
        <div class="icon">
          <van-icon id="tbs" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">执行记录</span>
        </div>
        <div class="icon">
          <van-icon id="tbs" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">运送申请</span>
        </div>
      </div>
    </div>

    <div id="four">
      <div id="nhgl">
        <span id="zi">能耗管理</span>
      </div>
      <div>
        <div class="icon">
          <van-icon  id="tbs" size="20px" color="blue"  @click="toConsume()" name="friends" /><br>
          <span id="zt">能耗统计</span>
        </div>
        <div class="icon">
          <van-icon id="tbs" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">数据集抄</span>
        </div>
        <div class="icon">
          <van-icon id="tbs" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">能耗预警</span>
        </div>
        <div class="icon">
          <van-icon id="tbs" size="20px" color="blue" @click="toAnalysis"  name="friends" /><br>
          <span id="zt">能耗分析</span>
        </div>
      </div>
    </div>

    <div id="five">
      <div id="zhaf">
        <span id="zi">综合安防</span>
      </div>
      <div>
        <div class="icon">
          <van-icon  id="tbs" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">预警事件</span>
        </div>
      </div>
    </div>

<br>
<br>
<br>


    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" @click="sy" >首页</van-tabbar-item>
      <van-tabbar-item icon="search" @click="xx" >消息</van-tabbar-item>
      <van-tabbar-item icon="friends-o" @click="wd">我的</van-tabbar-item>
<!--      <van-tabbar-item icon="setting-o">标签</van-tabbar-item>-->
    </van-tabbar>
  </div>

</template>


<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  methods:{
    toAnalysis(){
      this.$router.push('/analysis')
    },
    toConsume(){
      this.$router.push('/consume')
    },
    sy(){
      this.$router.push('/')
    },
    xx(){
      this.$router.push('/xiaoxi')
    },
    wd(){
      this.$router.push('/wode')
    },
    bjgd(){
      this.$router.push('/bjgd')
    },
    work_order(){
      this.$router.push('/work_order')
    }
  }
};
</script>

<style scoped>
#xlk{
  width: 75%;
  float: left;
}
#sm{
  width: 15%;
  float: right;
}
#ss{
  margin-left: 10px;
}
#bjgl{
  width: 100%;
  height: 30px;
  background-color: dodgerblue;
}
#zybs{
  width: 100%;
  height: 30px;
  background-color: dodgerblue;
}
 #ywgl {
   width: 100%;
   height: 30px;
   background-color:dodgerblue;
 }
 #nhgl{
   width: 100%;
   height: 30px;
   background-color: dodgerblue;
 }
 #zhaf{
   width: 100%;
   height: 30px;
   background-color: dodgerblue;
 }
 #zi{
   color: white;
   text-align: center;
   line-height: 30px;
   margin-left: 10px;
 }
 .icon{
   margin-top: 10px;
   width: 50px;
   height: 50px;
   float: left;
   //background-color: dodgerblue;
   margin-left: 30px;
 }
 #zt{
   font-size: 12px;
 }
 .icon #tb{
   margin-left: 15px;
 }
 #tbs{
   margin-left: 15px;
 }
 #one{
   width: 100%;
   height: 150px;
   background-color: #f5f5f5;
 }
 #two{
   width: 100%;
   height: 100px;
   background-color: #f5f5f5;
 }
 #three{
   width: 100%;
   height: 100px;
   background-color: #f5f5f5;
 }
 #four{
   width: 100%;
   height: 100px;
   background-color: #f5f5f5;
 }
#five{
  width: 100%;
  height: 100px;
  background-color: #f5f5f5;
}
#app{
  //margin-top: -20px;
}

</style>
